<template>
  <div>
    <div style="width: 430px; float: right">
      <el-input v-model="input" placeholder="请输入知识名称" @keyup.enter.native="searchEnterFun($event)">
        <i class="el-input__icon el-icon-search" slot="prefix"></i>
        <el-button :icon="appendIcon" slot="append" v-on:click="switchAppend"></el-button>
      </el-input>
    </div>
    <div id="advance" style="padding: 10px;float: right" v-if="showAdvance">
      <div>

        <div style="display: inline-block; width: 50%;">
          <el-cascader
            :options="subjectOptions"
            :props="cascadeProps"
            :show-all-levels="false"
            placeholder="关联分类"
            @change="handleChange"
            v-model="subject"
            size="small"
            clearable
          ></el-cascader>
        </div>
        <div style="display: inline-block; width: 48%;">
          <el-select v-model="platform" multiple placeholder="应用平台" size="small">
            <el-option
              v-for="item in platforms"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <div>
        <div style="width: 100px;text-align:right; display: inline-block">
          <span>版本号</span>
        </div>
        <div style="display: inline-block">
          <el-input size="small" style="width: 300px;margin-top: 10px" v-model="version"
                    placeholder="请输入版本号"></el-input>
        </div>
      </div>
      <div>
        <div style="width: 100px;text-align:right; display: inline-block">
          <span>编辑人员</span>
        </div>
        <div style="display: inline-block">
          <el-select filterable clearable style="width: 300px; " v-model="editor" placeholder="请选择编辑人员" size="small">
            <el-option
              v-for="item in $store.state.userList"
              :key="item.userName"
              :label="item.name"
              :value="item.userName">
            </el-option>
          </el-select>
        </div>
      </div>
      <div>
        <div style="width: 100px;text-align:right; display: inline-block">
          <span>审核人员</span>
        </div>
        <div style="display: inline-block">
          <el-select filterable clearable style="width: 300px; " v-model="auditor" placeholder="请选择审核人员" size="small">
            <el-option
              v-for="item in $store.state.userList"
              :key="item.userName"
              :label="item.name"
              :value="item.userName">
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="block">
        <div style="width: 100px;display: inline-block;text-align: right">更新时间</div>
        <div class="block" style="display: inline-block;">
          <el-date-picker
            v-model="updateTime"
            @change="dateChange"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format=" yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss"
            size="small" style="width: 300px;">
          </el-date-picker>
        </div>
      </div>
      <div v-if="drugInfoLibStatus">
        <div style="width: 100px;text-align:right; display: inline-block">
          <span>厂家</span>
        </div>
        <div style="display: inline-block">
          <el-input size="small" style="width: 300px;margin-top: 10px" v-model="drugInfoLibCompany"
                    placeholder="请输入厂家"></el-input>
        </div>
      </div>
      <div v-if="this.id === CONST.NEW_MEDIA_LIB_ID">
        <div style="width: 100px;text-align:right; display: inline-block">
          <span>是否排版</span>
        </div>
        <div style="display: inline-block">
          <el-select v-model="isCompose" clearable filterable style="width: 300px;margin-top: 10px">
            <el-option label="否" value="0">否</el-option>
            <el-option label="是" value="1">是</el-option>
          </el-select>
        </div>
      </div>
      <div v-if="this.value == 'published'">
        <div style="width: 100px;text-align:right; display: inline-block">
          <span>是否修订</span>
        </div>
        <div style="display: inline-block">
          <el-select v-model="isRevised" clearable filterable size="small" style="width: 300px">
            <el-option label="否" value="0">否</el-option>
            <el-option label="是" value="2">是</el-option>
          </el-select>
        </div>
      </div>

      <div style="margin-top: 30px; right: 10px;">
        <el-row>
          <el-col :offset="7" :span="9">
            <div style="margin-left: 90px;height: 32px; width: 88px;">
              <el-button size="small" v-on:click="advanceCancel">取 消</el-button>
            </div>
          </el-col>
          <el-col :span="2">
            <div style="margin-left:5px;height: 32px; width: 88px;">
              <el-button size="small" v-on:click="reset">重置</el-button>
            </div>
          </el-col>
          <el-col :offset="2" :span="1">
            <div style="height: 32px; width: 88px;">
              <el-button size="small" type="success" v-on:click="advanceConfirm">确 定</el-button>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import moment from "moment";

export default {
  props: ['value', 'id', 'drugInfoLibStatus'],
  data() {
    return {
      tableData: [],
      uploadVisible: false,
      componentName: "",
      show: "true",
      noData: false,
      showAdvance: false,
      appendIcon: "el-icon-caret-bottom",
      input: '',
      subject: [],
      searchData: [],
      subjectOptions: [],
      cascadeProps: {value: 'id', label: 'name', multiple: true, checkStrictly: true},
      standardTerminology: "",
      currentPage: 0, // 第几页
      pageSize: 10, // 每页显示的数据个数
      totalNum: 0,
      startTime: '',
      endTime: '',
      version: '',
      editor: '',
      auditor: '',
      platforms: [],
      platform: [],
      updateTime: '',
      drugInfoLibCompany: '',
      isCompose: '',
      isRevised: ''
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    reset: function () {
      this.subject = []
      this.name = ''
      this.platform = []
      this.editor = ''
      this.version = ''
      this.auditor = ''
      this.updateTime = ''
      this.drugInfoLibCompany = ''
      this.isCompose = ''
      this.isRevised = ''
    },
    switchAppend: function () {
      if (this.showAdvance) {
        this.showAdvance = false;
        this.appendIcon = "el-icon-caret-bottom";
      } else {
        this.showAdvance = true;
        this.appendIcon = "el-icon-caret-top";
      }
      // this.showSubject()
    },
    searchTerminology: function () {
      console.log("search terminology");
    },
    advanceCancel: function () {
      this.showAdvance = false;
    },
    dateChange(val) {
      this.updateTime = val;
      if (val == null) {
        this.updateTime = ''
      }
    },
    advanceConfirm: function () {
      this.Confirm()
    },
    searchEnterFun(e) {
      const keyCode = window.event ? e.keyCode : e.which;
      console.log("回车搜索", keyCode, e);
      if (keyCode === 13) {
        this.Confirm()
      }
    },
    handleChange(value) {
      this.subject = value;
      console.log(this.subject);
    },

    Confirm: function () {
      if (this.value == 'unpublished') {
        this.axios.get('/pmph/action/knowledgeLib/selectTempKnowledgeList', {
          params: {
            currentPage: 0, // 第几页
            pageNum: 10, // 每页显示的数据个数
            updateTime: this.updateTime.toString(),
            classify: JSON.stringify(this.subject),
            platform: JSON.stringify(this.platform),
            version: this.version,
            editor: this.editor,
            auditor: this.auditor,
            name: this.input,
            all: this.value,
            id: this.id,
            drugInfoLibCompany: this.drugInfoLibCompany,
            isCompose: this.isCompose,
          }
        }).then((response) => {
          this.noData = response.data.total <= 0;
          this.searchData = response.data.records
          this.totalNum = response.data.total;
          this.$emit('Confirm', this.searchData, this.totalNum, this.updateTime, this.subject, this.platform, this.version, this.editor, this.auditor, this.input, this.drugInfoLibCompany, this.isCompose)
          this.showAdvance = false;
        }).catch((error) => {
          console.error(error);
          this.tableData = [];
          this.noData = true;
          this.$message.error("未能请求到数据");
        })

      } else {
        this.axios.get('/pmph/action/knowledgeLib/selectReleasedKnowledgeList', {
          params: {
            currentPage: 0, // 第几页
            pageNum: 10, // 每页显示的数据个数
            updateTime: this.updateTime.toString(),
            classify: JSON.stringify(this.subject),
            platform: JSON.stringify(this.platform),
            version: this.version,
            editor: this.editor,
            auditor: this.auditor,
            name: this.input,
            all: this.value,
            id: this.id,
            drugInfoLibCompany: this.drugInfoLibCompany,
            isCompose: this.isCompose,
            isRevised:this.isRevised
          }
        }).then((response) => {
          this.noData = response.data.total <= 0;
          this.searchData = response.data.records;
          this.totalNum = response.data.total;
          this.$emit('Confirm', this.searchData, this.totalNum, this.updateTime, this.subject, this.platform, this.version, this.editor, this.auditor, this.input, this.drugInfoLibCompany, this.isCompose,this.isRevised)
          this.showAdvance = false;
        })
      }
    },
    dateFormat: function (row, column) {
      const date = row[column.property]
      if (date == undefined) {
        return ''
      }
      return moment(date).format("YYYY-MM-DD  HH:mm:ss")
    },
  },
  created() {
    console.log(this.id)
    // 获取分类数据
    this.axios.get("/pmph/action/knowledgeLib/selectTagFieldList", {
      params: {
        knowledgeLibId: this.id
      }
    }).then((response) => {
      // 关联分类的字段, 二级分类拼接;
      this.subjectOptions = []
      for (const field of response.data) {
        this.subjectOptions = this.subjectOptions.concat(app.$store.state.tagTree.find(tag => tag.id === field.kindValue).children)
      }
    })
    this.axios.get("/pmph/action/knowledgeLib/selectPlatform", {})
      .then((response) => {
        this.platforms = response.data
      })
  }
};
</script>
<style scoped>
.demo {
  width: 90px;
  text-align: right;
}
</style>
